<template>
	<view class="serve">
		<view class="serve-top ss-flex-row ss-row-between ss-col-center">
			<view class="serve-desc ">服务团队（6）</view>
			<image src="https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/mengchong/details-arrow-right.png"
				class="serve-right"  mode="aspectFill" ></image>
		</view>
		<scroll-view class="serve-scroll ss-m-t-20" scroll-x="true">
			<view  class="serve-scroll-item">
				<image src="https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/storage_2/storage/creator/202408071026419087.png" mode="aspectFill" class="serve-img"></image>
				<view class="serve-identity">官方认证</view>
				<view class="serve-title">周新建</view>
				<view class="serve-nurse">主治医师</view>
				<view class="serve-long">从业6年</view>
				
			</view>
			<view  class="serve-scroll-item">
				<image src="https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/storage_2/storage/creator/202408071026418645.png" mode="aspectFill" class="serve-img"></image>
				<view class="serve-identity">官方认证</view>
				<view class="serve-title">周新建</view>
				<view class="serve-nurse">主治医师</view>
				<view class="serve-long">从业6年</view>
				
			</view>
			<view  class="serve-scroll-item">
				<image src="https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/storage_2/storage/creator/202408071026413673.png" mode="aspectFill" class="serve-img"></image>
				<view class="serve-identity">官方认证</view>
				<view class="serve-title">周新建</view>
				<view class="serve-nurse">主治医师</view>
				<view class="serve-long">从业6年</view>
			</view>
			<view  class="serve-scroll-item">
				<image src="https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/storage_2/storage/creator/202408071026415845.png" mode="aspectFill" class="serve-img"></image>
				<view class="serve-title">周新建</view>
				<view class="serve-identity">官方认证</view>
				<view class="serve-nurse">主治医师</view>
				<view class="serve-long">从业6年</view>
			</view>
		</scroll-view>
	</view>
</template>

<script setup>
	import {
		computed,
		reactive,
		ref,
		onMounted
	} from 'vue';
	
	import sheep from '@/sheep';
</script>

<style lang="scss" scoped>
.serve{
		height:446rpx;
		background:#ffffff;
		font-family: Source Han Sans;
		.serve-top{
			height:50rpx;
			padding: 10rpx;
			.serve-desc{
				font-size: 32rpx;
				font-weight: bold;
				color: #3D3D3D;
				display:flex;
				justify-content: center;
				align-items: center;
				
			}
			.serve-right{
				width:24rpx;
				height:24rpx;
				margin-right:10rpx;
			}
		}
		
		.serve-scroll{
			white-space: nowrap;
			width: 100%;
			height:346rpx;
			
			.serve-scroll-item{
				display: inline-block;
				width: 200rpx;
				height: 346rpx;
				margin-right:16rpx;
				margin-left:16rpx;
				position:relative;
				
				.serve-img{
					width:188rpx;
					height:188rpx;
					
				}
				
				.serve-identity{
					
					font-size: 16rpx;
					font-weight: bold;
					color: #F0F0FD;
					background-color: #08DC48;
					width:82rpx;
					height:32rpx;
					display:flex;
					justify-content: center;
					align-items: center;
					border-radius: 16rpx;
					top: 172rpx;
					left:30px;
					position: absolute;
					
					
				}
				
				.serve-title{
					height:34rpx;
					width:100%;
					font-size: 24rpx;
					font-weight: bold;
					color: #3D3D3D;
					letter-spacing:1rpx;
					display:flex;
					align-items: center;
					justify-content: center;
					margin-top:20rpx;
				}
				.serve-nurse{
					height:28rpx;
					width:100%;
					font-size: 20rpx;
					color: #3D3D3D;
					display:flex;
					align-items: center;
					justify-content: center;
					margin-top:10rpx;
				}
				.serve-long{
					height:28rpx;
					width:100%;
					font-size: 20rpx;
					color: #3D3D3D;
					display:flex;
					align-items: center;
					justify-content: center;
					margin-top:10rpx;
					margin-bottom: 10rpx;;
				}
				
			}
			
		}
	}
</style>
